<!-- 我的 -->
<template>
  <view class="user">
    <view class="head-bg">
      <!-- 个人信息 -->
      <view class="user-info">
        <view class="info">
          <view>
            <image src="../../static/images/head.png" />
          </view>
          <view class="margin-left-sm">
            <view class="nickname">总有刁民想害朕</view>
            <view class="homepage">
              <text>我的主页</text>
            </view>
          </view>
        </view>
        <view class="sign" @click="tosign()">
          <view class="iconfont icon-qiandao" style="font-size: 36rpx; padding-right: 10rpx" />
          <view>打卡有礼</view>
        </view>
      </view>
      <!-- 会员专区 -->
      <view class="vip" v-if="!isVip">
        <view class="vip__img">
          <image class="front" src="@/static/images/vip/plus.png" />
          <image class="obverse" src="@/static/images/vip/vip.png" />
        </view>
        开通享95折会员价，领100元红包
        <view class="vip__btn">立马开通</view>
      </view>
      <view class="vip" v-else>
        <view>会员专区</view>
        <view>生日礼券</view>
        <view>专属优惠券</view>
        <view>0.1元兑好礼</view>
      </view>
    </view>
    <!-- 我的订单 -->
    <view class="order-area">
      <!-- 收藏/关注/足迹 -->
      <view class="collect">
        <view>
          <text class="iconfont icon-shoucang" />
          收藏
          <text>{{ collect > 0 ? collect : '' }}</text>
        </view>
        <view>
          <text class="iconfont icon-xihuan" />
          关注
          <text>{{ care > 0 ? care : '' }}</text>
        </view>
        <view>
          <text class="iconfont icon-zuji" />
          足迹
          <text>{{ track > 0 ? track : '' }}</text>
        </view>
      </view>
      <!-- 订单 -->
      <view class="order">
        <view class="order__item" @click="to_order(OrderStatus.obligation)">
          <uni-badge :text="2" absolute="rightTop" :offset="[-2, 10]" size="small">
            <text class="iconfont icon-daifukuan" />
          </uni-badge>
          <view>待付款</view>
        </view>
        <view class="order__item" @click="to_order(OrderStatus.receive)">
          <uni-badge :text="8" absolute="rightTop" :offset="[-2, 10]" size="small">
            <text class="iconfont icon-daishouhuo" />
          </uni-badge>
          <view>待收货</view>
        </view>
        <view class="order__item" @click="to_order(OrderStatus.evaluate)">
          <uni-badge :text="5" absolute="rightTop" :offset="[-2, 10]" size="small">
            <text class="iconfont icon-daipingjia" />
          </uni-badge>
          <view>待评价</view>
        </view>
        <view class="order__item" @click="to_order(OrderStatus.return)">
          <uni-badge :text="46" absolute="rightTop" :offset="[-2, 10]" size="small">
            <text class="iconfont icon-a-tuihuanhuo2x" />
          </uni-badge>
          <view>退换/售后</view>
        </view>
        <view class="order__item order__item__left" @click="to_order(OrderStatus.all)">
          <text class="iconfont icon-quanbudingdan order__item__color" />
          <view>全部订单</view>
        </view>
      </view>
    </view>
    <!-- 资产 -->
    <view class="wallet">
      <view class="wallet__item" @click="to_balance()">
        <view class="num">120</view>
        <view class="txt">余额</view>
      </view>
      <view class="wallet__item" @click="to_coin()">
        <view class="num">200</view>
        <view class="txt">紫币</view>
      </view>
      <view class="wallet__item" @click="to_my_coupon()">
        <view class="num">15</view>
        <view class="txt">优惠券</view>
      </view>
      <view class="wallet__item">
        <view class="num">0</view>
        <view class="txt">红包</view>
      </view>
      <view class="wallet__item wallet__left" @click="to_wallet()">
        <text class="iconfont icon-zichanguanli-" />
        <view class="txt">全部资产</view>
      </view>
    </view>
    <!-- 工具 -->
    <view class="tool">
      <view class="tool__box">
        <view class="tool__item">
          <text class="iconfont icon-kefu" />
          <view class="txt">在线客服</view>
        </view>
        <view class="tool__item" @click="to_coupon()">
          <text class="iconfont icon-youhuiquan" />
          <view class="txt">领券中心</view>
        </view>
        <view class="tool__item">
          <text class="iconfont icon-tongzhi" />
          <view class="txt">我的消息</view>
        </view>
        <view class="tool__item" @click="to_invite()">
          <text class="iconfont icon-yaoqingyouli" />
          <view class="txt">邀请有礼</view>
        </view>
      </view>
      <view class="tool__box">
        <view class="tool__item" @click="to_question()">
          <text class="iconfont icon-wenhao" />
          <view class="txt">常见问题</view>
        </view>
        <view class="tool__item" @click="to_feedback()">
          <text class="iconfont icon-fankui" />
          <view class="txt">意见反馈</view>
        </view>
        <view class="tool__item" @click="to_address()">
          <text class="iconfont icon-dizhi" />
          <view class="txt">地址管理</view>
        </view>
        <view class="tool__item" @click="to_setting()">
          <text class="iconfont icon-shezhi" />
          <view class="txt">设置</view>
        </view>
      </view>
    </view>

    <!-- 精选好货 -->
    <view class="divider">
      <aster-divider ref="asterDividerRef" text="精选好货" />
    </view>
    <view class="guess-like">
      <guess-like ref="guessLikeRef" type="my" />
    </view>

    <!-- 置顶 -->
    <back-top :scroll-top="scrollTop" />
  </view>
</template>

<script setup lang="ts">
  import { router } from '@/utils/router';
  import { nextTick, ref } from 'vue';
  import { OrderStatus } from '@/enums/orderEnum';
  import config from '@/utils/config';
  import GuessLike from '@/components/goods/guess-like.vue';
  import AsterDivider from '@/components/common/aster-divider.vue';
  import BackTop from '@/components/common/back-top.vue';
  import { onPageScroll, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';

  // 是否会员
  const isVip = ref<boolean>(false);
  // 收藏
  const collect = ref<number>(10);
  // 关注
  const care = ref<number>(120);
  // 足迹
  const track = ref<number>(99);

  // 分割线
  const asterDividerRef = ref();
  // 猜你喜欢
  const guessLikeRef = ref();
  // 置顶
  const scrollTop = ref();

  // 打卡
  const tosign = () => {
    router.push(config.route.coin_sign);
  };

  // 余额
  const to_balance = () => {
    router.push(config.route.wallet_balance);
  };

  // 积分
  const to_coin = () => {
    router.push(config.route.coin);
  };

  // 我的优惠券
  const to_my_coupon = () => {
    router.push(config.route.my_coupon);
  };

  // 我的资产
  const to_wallet = () => {
    router.push(config.route.wallet);
  };

  // 领券中心
  const to_coupon = () => {
    router.push(config.route.coupon);
  };

  // 邀请有礼
  const to_invite = () => {
    router.push(config.route.invite_user);
  };
  // 常见问题
  const to_question = () => {
    router.push(config.route.question);
  };
  // 意见反馈
  const to_feedback = () => {
    router.push(config.route.feedback);
  };
  // 地址管理
  const to_address = () => {
    router.push(config.route.address);
  };
  // 设置
  const to_setting = () => {
    router.push(config.route.setting);
  };

  // 跳转订单列表
  const to_order = (type: string) => {
    const url = config.route.order_list + '?s=' + type;
    router.push(url);
  };

  onPageScroll((e: any) => {
    scrollTop.value = e.scrollTop;
  });

  // 下拉刷新
  onPullDownRefresh(() => {
    nextTick(() => {
      guessLikeRef.value.getGuessData(1);
    });
  });

  // 页面滚动到底部的事件
  onReachBottom(() => {
    guessLikeRef.value.getGuessData();
  });
</script>

<style scoped lang="scss">
  .user {
  }

  .head-bg {
    background-image: url('@/static/images/user-head-bg.jpeg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .user-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;

    .info {
      display: flex;
      align-items: center;
      flex: 1;
      padding: 10px;

      image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
      }

      .nickname {
        font-size: 32rpx;
        line-height: 1;
      }
      .homepage {
        margin-top: 20rpx;
        font-size: 24rpx;

        text {
          background-color: rgb(52, 53, 56, 0.3);
          border-radius: 10rpx;
          margin: 20rpx 0;
          padding: 10rpx;
        }
      }
    }

    .sign {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 30rpx;
      background-color: #ff6a6c;
      color: #fff;
      padding: 6rpx 20rpx;
    }
  }

  .vip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    top: -20rpx;
    padding: 20rpx;
    margin: 0 20rpx;
    border-radius: 20rpx;
    background-color: rgb(52, 53, 56, 0.3);
    color: #fdd192;

    &__img {
      width: 90rpx;
      height: 60rpx;
      transform-style: preserve-3d;
      position: relative;
      animation: rotate 15s linear infinite;

      image {
        width: 90rpx;
        height: 60rpx;
      }
    }

    .front {
      position: absolute;
      transform: rotateX(180deg);
      backface-visibility: hidden;
    }

    .obverse {
      position: absolute;
      backface-visibility: hidden;
    }

    @keyframes rotate {
      0% {
        transform: rotateX(0);
      }

      100% {
        transform: rotateX(360deg);
      }
    }

    &__btn {
      padding: 4rpx 20rpx;
      border-radius: 50rpx;
      background-color: #ff6a6c;
    }
  }

  .order-area {
    background-color: #fff;
    border-radius: 20rpx;
    margin: 0 20rpx;
    .collect {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10rpx 50rpx;
      border-top-left-radius: 20rpx;
      border-top-right-radius: 20rpx;
      background-color: #e5e5e5;

      text {
        font-size: 24rpx;
      }
    }

    .order {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10rpx 20rpx;

      &__item {
        display: flex;
        align-items: center;
        position: relative;
        font-size: 24rpx;
        color: #75787d;
        flex: 1;
        flex-flow: column;

        text {
          font-size: 56rpx;
        }

        &__left {
          border-left-style: solid;
          border-left-color: #bbb;
          border-left-width: 1px;
        }

        &__color {
          color: #ff6a6c;
        }
      }
    }
  }

  .txt {
    font-size: 24rpx;
    color: #75787d;
  }

  .wallet {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-radius: 20rpx;
    margin: 20rpx;
    padding: 20rpx 20rpx;

    &__item {
      display: flex;
      align-items: center;
      flex: 1;
      flex-flow: column;

      text {
        font-size: 48rpx;
        color: #ff6a6c;
      }

      .num {
        font-size: 36rpx;
        color: #333;
        line-height: 2.2;
      }
    }

    &__left {
      border-left-style: solid;
      border-left-color: #bbb;
      border-left-width: 1px;
    }
  }

  .tool {
    background-color: #fff;
    border-radius: 20rpx;
    margin: 20rpx;
    padding: 20rpx 20rpx;

    &__box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10rpx 0;
    }

    &__item {
      display: flex;
      align-items: center;
      flex: 1;
      flex-flow: column;

      text {
        font-size: 48rpx;
        color: #ff6a6c;
      }
    }
  }

  .divider {
    margin: 40rpx 20rpx;
  }

  .guess-like {
    position: relative;
    width: 100%;
    padding: 0 20rpx;
  }
</style>
